<template>
  <div class="tree-drag">
      <a-tree
        show-line
        :tree-data="myData"
        class="draggable-tree"
        :draggable="optFlag!=3"
        :replace-fields="replaceFields"
        @drop="onDrop"
        :selectedKeys="mySelectedKeys"
        @select="selectTree"
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        @expand="onExpand"
      >
        <template slot="name" slot-scope="item">
            <div class="tree-item">
                <span v-show="key!==item.key">{{ item.name }}</span>
                <a-input type="text" @blur="myBlur($event,item)" :value="item.name" v-show="key===item.key" :ref="'tagInput_'+item.key"></a-input>
                <a type="primary" class="but_type btn-edit"  @click.stop="edit(item)"  v-show="key!==item.key&&optFlag!=3">修改</a>
                <a type="primary" class="but_type" @click.stop="remove(item)"  v-show="key!==item.key&&optFlag!=3">删除</a>
            </div>
        </template>
      </a-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
        myData:[],
        replaceFields: {
            title: "name"
        },
        key:'',
        mySelectedKeys:[],
        expandedKeys:[],
        autoExpandParent: true,
    }
  },
  props: {
    selectedKeys:{
        type: Array,
        default: null
    },
    selectedData:{
        type: Array,
        default: null
    },
    dropFunc:{
        type: Function,
        default: ()=>{}
    },
    nameBlur:{
        type:Function,
        default:()=>{}
    },
    removeFunc:{
        type:Function,
        default:()=>{}
    },
    selectDrag:{
        type:Function,
        default:()=>{}
    },
    optFlag: {
      // 1新增 2编辑 3查询
      type: Number,
      default: 1
    },
  },
  mounted(){
      this.myData = this.selectedData;
      this.expandedAll(this.myData,'children');
  },
  methods: {
    //设置节点全部展开
    expandedAll(myArr,children){
        var $this = this;
        try {
            (function poll(myArr) {
                if (!Array.isArray(myArr)) return
                for (let i = 0; i < myArr.length; i++) {
                    $this.expandedKeys.push(myArr[i].key);
                    if (children && myArr[i][children] && myArr[i][children].length) {
                        poll(myArr[i][children])
                    }
                }
            })(myArr, 0)
        } catch (err) {}
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    //选中树节点
    selectTree(selectedKeys){
        this.$emit('selectDrag',selectedKeys);
    },
    //编辑树节点
    edit (treeObj) {
        this.key=treeObj.key;
        this.$nextTick(()=>{
            this.$refs['tagInput_'+treeObj.key].focus();
        });
    },
    //名称失焦
    myBlur(e,treeObj){
        this.key = '';
        this.$emit('nameBlur',treeObj,e.target.value);
    },
    //树节点拖动
    onDrop(info) {
        this.$emit('dropFunc',info);
    },
    remove (treeObj) {
        this.$emit('removeFun',treeObj);
    },
    //返回修改后的树数据
    getData(){
        return this.myData;
    }
  },
  watch: {
      selectedData(n){
        this.myData = n;
      },
      selectedKeys(n){
        this.mySelectedKeys = n;
        this.expandedKeys.push(this.mySelectedKeys[0]);
      }
  }
}
</script>
<style lang="stylus">
@import '~stylus/mixin.styl';
.tree-drag 
    overflow-y auto
    pos(52px, 0, 0, 15px, 1, 0)
.tree-item
    position relative
    padding-right 80px
    span
        margin-right 5px
    .but_type
        position absolute
        right 5px
        color #2d8cf0
        display none
    .btn-edit 
        right 40px
    &:hover
        .but_type
            display inline-block
    .ant-input
        pos(-2px,-5px,-2px,-5px,1,-1);
        height 24px
        line-height 24px
        width auto
.ant-tree-node-selected
    .but_type
        display inline-block
</style>